
<template>
  <div class="about">
    <h1>This is an about page</h1>
	
	<hr />
	<!-- <AboutChildTwo>
		<template #default>
			<mark>mark</mark>
		</template>
		<template #btn>
			<button>btn1</button>
			<button>btn2</button>
		</template>
		
	</AboutChildTwo> -->
	<!-- <Form.FormInput/>
	<Form.FormButton/>
	<Form.FormRadio/> -->
	<!-- <Form.FormInput>
		<Form.FormRadio/>
		<template #header>
			<Form.FormButton/>
			<h1>我是h1</h1>
		</template>
	</Form.FormInput> -->
	
	<!-- <input type="text" v-my-dir="'你好啊'"/> -->
	
	<!-- <AboutChildTwo ref="myCom"></AboutChildTwo> -->
	<h1 id="box">{{count}}</h1>
	<button @click="add">+1</button>
	
	<h2 @click="num=num+2">{{num}}</h2>
  </div>
</template>
<script setup>
import { nextTick, ref, watchEffect } from 'vue';
	
	// let count=ref(1);
	async function add(){
		count.value++;
		
		// console.log(document.getElementById("box").innerHTML)
		// await nextTick()
		// console.log(document.getElementById("box").innerHTML)
		// console.log("-------")
	}
	const count = ref(0)
	let num=ref(100)
	
	
	watchEffect(() => {
		console.log("watchEffect count",count.value)
		//console.log("watchEffect num",num.value)
		console.log('dom innerHTML',document.getElementById("box").innerHTML)
		console.log("-------")
	},{
		flush:"post"
	})
	// -> 输出 0
	
	//count.value++;

	// import AboutChildTwo from '../components/AboutChildTwo.vue';
	// // import * as Form from "../utils/myform.js";
	// // import vMyDir from '../utils/MyDir.js'

	// import { onMounted, ref } from 'vue';

	
	// let myCom=ref(null);
	// onMounted(()=>{
	// 	console.log(myCom.value.one)
	// 	console.log(myCom.value.two)
	// })
</script>
<style>
	
</style>


<!--<template>
  <div class="about">
    <h1>This is an about page</h1>
	<button @click="age=age+2">改变age</button>
	<h1>count:{{count}}</h1>
	<hr />
	<AboutChild userName="小明" age="19" @che="changeCount"></AboutChild>
	<AboutChild userName="赵六" :age="age" @che="changeCount"/>
  </div>
</template>
<script setup>
	import { provide, ref } from 'vue';
	import AboutChild from '../components/AboutChild.vue';
	let age=ref(10)
	let count=ref(5)
	function changeCount(v){
		count.value+=v
	}
	
	let msg=ref("hello 子子")
	provide("myMsg",msg);
	
	provide("changeCount",changeCount)
	
</script>
<style>
	
</style>
-->
